<!--
 * @Author: your name
 * @Date: 2021-04-17 16:53:02
<<<<<<< HEAD
 * @LastEditTime: 2021-04-17 16:53:10
=======
 * @LastEditTime: 2021-04-18 16:33:06
>>>>>>> origin/liuyuxi
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\patient-app\src\views\pages\question.vue
-->
<template>
  <div class="question">
<<<<<<< HEAD
      <div class="header">
        <van-nav-bar
          title="快速问诊"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
        >
          <template #right>
            <van-icon name="search" size="18" dot/>
          </template>
        </van-nav-bar>
      </div>
      <div class="main">
        <div class="msg">
          <van-image
            round
            width="42"
            height="42"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <p>您好，请详细描述您的病情，我<br>们将会安排适合的医生为您服务</p>
        </div>
        <p>您也可以点击标签快速回答：</p>
      </div>
      <div class="footer">
        <div class="send">
          <van-search v-model="value" placeholder="描述越细，推荐越准，至少2个字" shape='round' height='60px'/>
          <van-button round type="default" class="btn">发送</van-button>
        </div>
        <div class="anni">
          <span><van-icon name="chat-o" size='24'/><b>曾经问过</b></span>
          <span><van-icon name="service-o" size='24'/><b>语音输入</b></span>
          <span><van-icon name="photo-o" size='24' /><b>传入图片</b></span>
        </div>
      </div>
=======
    <div class="header">
      <span @click="$router.push('/home/homes')">&lt;</span>
      <span>快速问诊</span>
      <span>消息</span>
    </div>
    <div class="main">
      <dl class="ai">
        <dt><img :src="aiAvatar" alt="" /></dt>
        <dd>你好，请详细描述您的病情，我们将会安排适合的医生为你服务</dd>
      </dl>
      <div class="tag">
        <p>您也可以点击标签快速回答</p>
        <div class="tagContent">
          <span>感冒咳嗽</span>
          <span>头痛头晕</span>
          <span>过敏</span>
          <span>胃疼</span>
          <span>肚子疼</span>
          <span>妇科问题</span>
          <span>高血压</span>
          <span>糖尿病</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="top">
        <input type="text" placeholder="描述越细，推荐越准，至少两个字" />
        <button class="send" @click="$router.push('/docList')">发送</button>
      </div>
      <div class="bottom">
        <span>曾经问过</span>
        <span>语音输入</span>
        <span>传入图片</span>
      </div>
    </div>
>>>>>>> origin/liuyuxi
  </div>
</template>

<script>
<<<<<<< HEAD
import { Toast } from 'vant';

export default {
  data(){
    return {
      value:''
    }
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    }
  },
}
</script>

<style lang='scss' scoped>
.question{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header{
    height: 46px;
    background: #4483EC;
  }
  .main{
    flex: 1;
    overflow-y: auto;
    background: #EAEEEF;
    .msg{
      display: flex;
      padding: 10px 12px;
      p{
        background: #fff;
        line-height: 32px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 36px;
      }
    }
    
  }
  .footer{
    height: 100px;
    .send{
      height: 50px;
      display: flex;
      //align-items: center;
      white-space: nowrap;
    }
    .anni{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span{
        display: flex;
=======
import aiAvatar from "../../assets/avatar.jpg";
export default {
  data() {
    return {
      aiAvatar,
    };
  },
};
</script>

<style lang='scss' scoped>
.question {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}
.header {
  width: 100%;
  height: 38px;
  color: #fff;
  background-color: #4483ec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
}
.main {
  width: 100%;
  flex: 1;
  overflow: auto;
  background-color: #eee;
  .ai {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    align-items: center;
    dt {
      width: 70px;
      height: 100%;
      border-radius: 50%;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    dd {
      flex: 1;
      height: 80%;
      margin-left: 10px;
      background-color: #fff;
      border-radius: 15px;
      padding: 4px 0;
    }
  }
  .tag {
    width: 100%;
    p {
      width: 100%;
      color: skyblue;
      font-size: 14px;
      padding: 0 14px;
    }
    .tagContent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 6px;
      span {
        background-color: #fff;
        padding: 10px 12px;
        border-radius: 20px;
        color: #4483ec;
        flex-shrink: 0;
        margin: 8px;
>>>>>>> origin/liuyuxi
      }
    }
  }
}
<<<<<<< HEAD
=======
.footer {
  width: 100%;
  background-color: #fff;
  .top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 4px 14px;
    input {
      border: none;
      outline: none;
      border-radius: 25px;
      background-color: #eee;
      flex: 1;
      margin-right: 20px;
      font-size: 14px;
      text-align: center;
    }
    .send {
      border: none;
      outline: none;
      width: 80px;
      border-radius: 25px;
      border: 1px solid #ccc;
      color: #666;
      background-color: #fff;
    }
  }
  .bottom {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
>>>>>>> origin/liuyuxi
</style>